<template>
  <div class="bg">

    <div class="login">
      <h2 style="text-align: center">找回密码</h2>
      <a-form :form="form" class="register-form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="邮箱">
          <a-row :gutter="8">
            <a-col :span="16">
              <a-input v-decorator="['email',{
                    rules: [
                      {
                        type: 'email',
                        message: '请输入正确的邮箱地址!',
                      },
                      {
                        required: true,
                        message: '请输入邮箱!',
                      },
                    ],
                  },
                ]"
              />
            </a-col>
            <a-col :span="4">
              <a-button @click="sendEmail" :disabled="codeLoading">{{ content }}</a-button>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item v-bind="formItemLayout">
          <span >
            验证码
          </span>
          <a-input
              v-decorator="[
          'code',
          {
            rules: [{ required: true, message: '验证码!', whitespace: true }],
          },
        ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
          <a-input
              v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '请输入密码!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
              type="password"
          />
        </a-form-item>


        <a-form-item>
          <a-button type="primary" html-type="submit" class="register-form-button">
            重置密码
          </a-button>
          <router-link :to="{path:'/toLogin'}"> 已有账号?去登陆</router-link>
        </a-form-item>
      </a-form>

    </div>

  </div>
</template>

<script>
import PmsApi from "@/components/login/js/PmsApi";

const toal = 60;

export default {
  name: "RetrievePassword",
  data() {
    return {
      codeLoading: false,
      content: '发送验证码',
      totalTime: toal,      //记录具体倒计时时间
      confirmDirty: false,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 20},
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: 'register'});
  },
  methods: {
    sendEmail() {
      this.form.validateFields((err, values) => {
        PmsApi.sendEmail(values).then((data) => {
          this.$message.success(data);
          this.countDown();
        }, message => {
          this.$message.warning(message);
        });
      });

    },
    countDown() {
      this.codeLoading = true;
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送';
        if (this.totalTime === 0) {
          window.clearInterval(clock);
          this.totalTime = toal;
          this.codeLoading = false;
          this.content = '发送验证码';
        }
      }, 1000)
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          PmsApi.resetPassword(values).then(res => {
            this.$message.success(res);
          }, message => {
            this.$message.warning(message);
          });
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('两次密码输入不一致!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], {force: true});
      }
      callback();
    },
  },
};
</script>

<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

.register-form-button {
  width: 100%;
}

</style>
